const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装
const webpack = require('webpack'); //访问内置的插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const path = require('path');
const Mock=require("mockjs");

let data=Mock.mock({
    "list|4":[{
        "id":"@id",
        "img":"@Image(100X100,@color)",
        "title":"@ctitle"
    }]
})

module.exports = {
    entry:"./src/index.js",
    output:{
        filename:"main.js",
        path:path.join(__dirname,"./dist")
    },
    plugins: [
        // new webpack.optimize.UglifyJsPlugin(),
        new HtmlWebpackPlugin({template: './src/index.html'}),
        //抽离css
        new MiniCssExtractPlugin({
            filename:"style.css"
        })
      ],
    mode:"development",
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [ MiniCssExtractPlugin.loader,
                 'css-loader',
                 'sass-loader']
        },
        {
            test: /\.js$/,
            exclude: /(node_modules|bower_components)/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: ['@babel/preset-env']
              }
            }
        },
        {
          test: /\.(png|jpg|gif)$/,
          use: [
            {
              loader: 'file-loader',
              options: {}
            }
          ]
        }
        
      ]
    },
    devServer:{
        host:"localhost",
        port:9999,
        hot:true,
        open:true,
        before(app){
            app.get("/list",(req,res)=>
            {
                res.send(data.list)
            })
            app.get("/detail",(req,res)=>
            {
                res.send(data.list[0])
            })
        }
    }
}